<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="wrap">
        <h2>jQuery文档处理</h2>
        <div class="buttons">
            <button>新增1</button>
            <button>新增2</button>
            <button>新增3</button>
            <button>insertBefore/insertAfter</button>
            <button>replaceAll</button>
            <button>replaceWith</button>
            <button>empty</button>
            <button>remove/detach</button>
            <button>clone</button>
            <button>wrap</button>
            <button>unwrap</button>
            <button>wrapInner</button>
        </div>
        <div class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </div>
    </div>
</body>
<script>
    // jQuery中如何创建元素
    // 1.创建原生dom元素，再转为jQuery对象
    // 2.jQuery接收一个html结构  => 返回对应的jQuery对象  $("<li></li>")
    // 3.jQuery接收一个html结构,接收第二个参数作为该元素的修饰  $("<li>",{}) 


    // 由父元素统筹
    // append  向匹配的元素中追加一个元素
    // preppend  向匹配的元素中预追加一个元素

    // appendTo  向匹配的元素(新增的/已存在的)中追加到另一个元素(父元素)中
    // prependTo  向匹配的元素(新增的/已存在的)中预追加到另一个元素(父元素)中


    // insertBefore  将匹配的元素(新增的/已存在的)插入到另一个同级元素的前面
    // insertAfter  将匹配的元素(新增的/已存在的)插入到另一个同级元素的后面


    // replaceWith   将一个已存在的元素 替换为 新的元素
    // replaceAll    用匹配的元素(新增的/已存在的) 替换 另一个元素(已存在的)


    $("button").eq(0).click(function () {
        // 1.创建原生dom元素，再转为jQuery对象
        var li = document.createElement("li");
        var $li = $(li).text("hello,我是新增1的li").css({ background: "#D16E33" });
        // $(".list").append($li);  //追加
        $(".list").prepend($li);    //预追加 

        // 点击insertBefore/insertAfter按钮时
        $("button").eq(3).click(function () {
            $($li).insertBefore(".mid")
        })


        // 点击replaceWith按钮时
        $("button").eq(5).click(function () {
            $($li).replaceWith(".mid");  //将 $li 的内容替换为 .mid 的内容
        })
    })


    $("button").eq(1).click(function () {
        // 2.jQuery接收一个html结构  => 返回对应的jQuery对象
        var $li = $("<li>hello,我是新增2的li</li>").css({ background: "#D8C696" });
        // $(".list").append($li);
        $($li).prependTo(".list");

        // 点击insertBefore/insertAfter按钮时
        $("button").eq(3).click(function () {
            $($li).insertAfter(".mid")
        })

        // 点击replaceAll按钮时
        $("button").eq(4).click(function () {
            $($li).replaceAll(".mid");  //将 .mid 的内容替换为 $li 的内容
        })
    })


    $("button").eq(2).click(function () {
        // 3.jQuery接收一个html结构,接收第二个参数作为该元素的修饰
        var $li = $("<li>", {
            html: "hello,我是新增3的li</li>",
            id: "newLi",
            style: "background:pink;border: 2px solid black;height:50px;width:200px"
        })
        // $(".list").append($li);
        $($li).appendTo(".list");

    })



    // empty  清空匹配的元素
    $("button").eq(6).click(function () {
        $(".list").empty();  //相当于$(".list").html("");
    })



    $(".list li").each(function () {
        var index = $(this).index();
        $(this).data("haha", `我是第${index}个li`);
    })
    $(".list li").click(function () {
        console.log($(this).index(), $(this).data("haha"));
    })

    // remove()  从dom中删除匹配的元素  但除了这个元素本身得以保留外，其他的比如绑定的事件、附加的数据都会被移除
    // detach()  从dom中删除匹配的元素  所有绑定的事件、附加的数据都会保留下来
    $("button").eq(7).click(function () {
        // var del = $(".first").remove();
        var del = $(".first").detach();
        setTimeout(function () {
            $(del).appendTo(".list");
        }, 1000)
    })


    // clone(false) 克隆匹配的元素及其子元素  默认false  即元素相关事件和绑定的数据并不克隆
    // clone(true) 克隆匹配的元素及其子元素  同时也克隆元素相关事件和绑定的数据并不克隆
    $("button").eq(8).click(function () {
        // $(".last").clone().appendTo(".list");
        $(".last").clone(true).appendTo(".list");
    })


    // wrap()  将匹配的每一个元素用其他元素的结构化标记包裹起来
    // wrapAll()  将所有匹配的元素用一个元素包裹起来
    $("button").eq(9).click(function () {
        // $(".li").wrap("<strong></strong>");
        $("li").wrapAll("<strong></strong>");
    })


    // unwrap()  移除元素的父元素  可快速取消wrap()的效果
    $("button").eq(10).click(function () {
        // $(".li").wrap("<strong></strong>");
        $("li").unwrap();
    })


    // wrapInner()  把匹配的元素(每一个)的子内容 用其他元素的结构化标记包裹起来
    $("button").eq(11).click(function () {
        // $(".li").wrap("<strong></strong>");
        $("li").wrapInner("<a href='https://www.baidu.com'></a>");
    })
</script>

</html>